import './index.scss'
import { getlist } from '../../api/home'
import { useState, useEffect } from "react";
import { useLocation } from 'react-router-dom';

export default () => {

    // const [detailList] = useState([]);

    /**
     * 渲染数据
     */
    // const cart = getlist();
    // console.log(cart);

    const [getlistdata, setgetlistdata] = useState([])

    const sol = async () => {
        try {
            const list = await getlist()
            console.log(list.result);
            setgetlistdata(list.result)
        } catch (error) { }
    }

    useEffect(() => {
        sol()
    }, [])

    // ++
    const add = () => {
        getlistdata.videoScale++
    }

     // --
     const minus = () => {
        getlistdata.videoScale--
    }

    return (
        <div className='big-box'>
            <div className='left'>
                <div className='big'>
                    <img src={require('../../assets/imgs/tu1.jpg')} alt="" />
                </div>
                <div className='min'>
                    <ul>

                        {/* <li><img src={require('https://yanxuan-item.nosdn.127.net/23a83da0ba6147669af4ca959a88147c.jpg')} alt="" /></li>
                        <li><img src={require('https://yanxuan-item.nosdn.127.net/9ded860c121d9f504f23eab0cd85eeb7.jpg')} alt="" /></li> */}
                        /* <li><img src={require('../../assets/imgs/tu3.jpg')} alt="" /></li>
 
                        <li><img src={require('../../assets/imgs/tu1.jpg')} alt="" /></li>
                        <li><img src={require('../../assets/imgs/tu2.jpg')} alt="" /></li>
                        <li><img src={require('../../assets/imgs/tu3.jpg')} alt="" /></li>

                        <li><img src={require('../../assets/imgs/tu4.jpg')} alt="" /></li>
                        <li><img src={require('../../assets/imgs/tu5.jpg')} alt="" /></li>
                    </ul>
                </div>
            </div>
            <div className='right-box'>
                <h1>落花风静煮茶香玻璃煮茶壶蒸煮茶器</h1>
                <p>造型古朴高硼硅材质，耐冷热高温</p>
                <p><span>￥</span>109.00 <s>￥109.00</s></p>
                <main>
                    <p>
                        <span>促销</span>
                        12月好物放送,App领券购买直降120元
                    </p>
                    <p>
                        <span>配送</span>
                        位置
                    </p>
                    <p className='bottom'>
                        <span>服务</span>
                        <m>·</m>
                        无忧退货
                        <m>·</m>
                        快速退款
                        <m>·</m>
                        免费包邮
                        <m>了解详情</m>
                    </p>
                </main>
                <div>
                    <span>规格</span>
                    <img src={require('../../assets/imgs/tu6.jpg')} alt="" />
                    <img src={require('../../assets/imgs/tu7.png')} alt="" />
                    <img src={require('../../assets/imgs/tu8.png')} alt="" />

                </div>
                <div>
               <button onClick={()=>minus()}>--</button>     {getlistdata.videoScale}  <button onClick={() => add()}>++</button>
                </div>
                <button className='button'>加入购物车</button>
            </div>

            <div className='ioopoii'>
                <ul>
                    <li>
                        <p>销量人气</p>
                        <p style={{color:'red'}}>200+</p>
                        <p>销量人气</p>
                    </li>

                    <li>
                        <p>商品评价</p>
                        <p style={{color:'red'}}>400+</p>
                        <p>查看商品</p>
                    </li>
                    
                    <li>
                        <p>收藏人气</p>
                        <p style={{color:'red'}}>600+</p>
                        <p>收藏人气</p>
                    </li>
                    
                    <li>
                        <p>品牌消息</p>
                        <p style={{color:'red'}}>苏宁电器</p>
                        <p>品牌主题</p>
                    </li>
                </ul>
            </div>

        </div>
    )
}